<template>
  <div class="app-container">
    <div class="index_data">

      <el-card class="left-cell">
        <el-tooltip
          class="item"
          effect="dark"
          content="今日成功交易金额及笔数"
          placement="top"
        >
          <i class="el-icon-question" style="float: right; color: #666"> </i>
        </el-tooltip>

        <div class="left-cell-text">
          <h4 style="font-size:30px">今日交易金额</h4>
          <h1 style="font-size:40px">
            ￥{{ todayPrice }}
            <span>共{{ todayPrice }}元</span>
          </h1>
        </div>
      </el-card>

      <div class="mid-box">
        <div class="mid-cell1">
          <el-card class="mid-cell1-1">
            <el-tooltip
              class="item"
              effect="dark"
              content="成功交易总金额"
              placement="top"
            >
              <i class="el-icon-question" style="float: right; color: #666">
              </i>
            </el-tooltip>
            <div class="m_cell">
              <h4>交易总金额</h4>
              <h1>￥{{ totalPri }}</h1>
            </div>
          </el-card>
          <el-card class="mid-cell1-2">
            <el-tooltip
              class="item"
              effect="dark"
              content="今日上架菜品数量"
              placement="top"
            >
              <i class="el-icon-question" style="float: right; color: #666">
              </i>
            </el-tooltip>
            <div class="m_cell">
              <h4>今日上架菜品数量</h4>
              <h1>{{ putwayFood }}</h1>
            </div>
          </el-card>
        </div>
        <div class="mid-cell2">
          <el-card class="mid-cell2-1">
            <el-tooltip
              class="item"
              effect="dark"
              content="成功交易总笔数"
              placement="top"
            >
              <i class="el-icon-question" style="float: right; color: #666">
              </i>
            </el-tooltip>
            <div class="m_cell">
              <h4>交易总笔数</h4>
              <h1>{{ tradeNum }}</h1>
            </div>
          </el-card>

          <el-card class="mid-cell2-2">
            <el-tooltip
              class="item"
              effect="dark"
              content="商户总数量"
              placement="top"
            >
              <i class="el-icon-question" style="float: right; color: #666">
              </i>
            </el-tooltip>
            <div class="m_cell">
              <h4>菜品总数量</h4>
              <h1>{{ totalFood }}</h1>
            </div>
          </el-card>
        </div>
      </div>

      <el-card class="right-cell">
        <el-button
          icon="el-icon-more"
          type="text"
          style="font-size: 1.2em; float: right; padding: 0; color: #666"
          @click="drawer = true"
        >
        </el-button>
        <div class="user_info">
          <el-image
            class="user_avatar"
            lazy
            :src="businessMessage.image"
            style="width: 70px; height: 70px; border-radius: 50%; padding: 0"
          />
          <div class="user_info_cell">
            <p>您好，{{ businessMessage.name }}！</p>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="color:#ffffff">
          <p>营业时间：{{ businessMessage.beginTime }} - {{businessMessage.endTime}}</p>
          <p>地址：{{ businessMessage.position }}</p>
          <p>区域：{{ businessMessage.area }}</p>
          <p>电话号码：{{ businessMessage.phone }}</p>
        </div>
      </el-card>
    </div>

    <div class="bot_box">
      <el-card class="bot_cell1">
        <h4 style="margin: 0 0 0 10px; display: inline-block">销量Top7的菜品</h4>
        <el-date-picker
          style="float: right; width: 236px"
          v-model="date_value"
          type="daterange"
          align="right"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="pickerFunc"
        >
        </el-date-picker>
        <!-- <div id="shu" style="width: 100%; height: 280px" /> -->
        <div id="sales" style="height: 350px;"></div>
      </el-card>

      <el-card class="bot_cell2" style="height: 350px; width: 200px;">
        <h4>好评最高的菜品</h4>
        <el-date-picker
          class="bot_cell2_picker"
          style="float: right; width: 236px"
          v-model="pay_way_date_value"
          type="daterange"
          align="right"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="pickerFunc_pay"
        >
        </el-date-picker>
        <div id="evaluate" style="height: 300px; width: 100%"></div>
        <!-- <div id="pie_border_radius" style="height: 250px; width: 100%"></div> -->
      </el-card>
    </div>
    <el-drawer
      size="20%"
      :visible.sync="drawer"
      title="用户信息"
      :direction="direction"
    >
      <el-descriptions class="user_drawer" :column="1" size="mini">
        <el-descriptions-item label="用户名">{{
          this.user_info.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{
          this.user_info.nickName
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          this.user_info.phonenumber
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{
          this.user_info.email
        }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{
          this.user_info.group
        }}</el-descriptions-item>
        <el-descriptions-item label="权限">{{
          this.user_info.role
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <dict-tag
            :options="dict.type.sys_user_sex"
            :value="this.user_info.sex"
          />
        </el-descriptions-item>
        <el-descriptions-item label="账户状态">
          <el-tag size="mini">
            {{ this.stateFormat(this.user_info.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script>
// import echarts from "echarts";
import { getUserProfile } from "@/api/system/user";
import store from "@/store";
import { formatDate } from "@/utils/index";
import * as echarts from 'echarts';
import { todayTotalPrice, totalPrice, totalFood, businessMsg, putWay, tradenum, goodReputation } from "@/api/scancode/home"
// import { list, typeCount, selectTRefundAmount } from "@/api/mxfpay/home";

require("echarts/theme/macarons");

export default {
  dicts: ["sys_user_sex", "sys_normal_disable"],
  name: "Index",
  data() {
    return {
      msg: "您好，",
      render: true,
      user_info: {
        avatar: "",
        userName: "",
        role: "",
      },
      drawer: false,
      direction: "rtl",
      date_value: "",
      pay_way_date_value: "",
      data: {
        transaction_amount_today: 0.0,
        number_of_transactions_today: 0,
        total_transaction_amount: 0.0,
        total_transactions: 0,
        total_isv: 0,
        total_mch: 0,
        week_transaction_amount: [0, 0, 0, 0, 0, 0, 0],
        yesterday_transaction_amount: 0,
        total_week_amount: 0.0,
        pay_way: [
        ],
        order_list: [],
        refund_list: [],
      },
      date_list: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      todayPrice:'',
      totalPri: '',
      totalFood:'',
      businessMessage:'',
      putwayFood:'',
      tradeNum:''
    };
  },

  created() {
    let startDay = formatDate(
      new Date().setDate(new Date().getDate() - 6)
    ).substring(0, 10);
    let endDay = formatDate(new Date()).substring(0, 10);
    // this.date_value = [startDay, endDay];
    this.pay_way_date_value = [startDay, endDay];
    this.date_value = [startDay, endDay];
    this.getDate(startDay, endDay);

    //获取今日总金额
    todayTotalPrice().then( res => {
      this.todayPrice = res.msg
      console.log(this.todayPrice, 'price')
    }),

    //获取总金额
    totalPrice().then( res => {
      this.totalPri = res.msg
    })

    //获取全部菜品
    totalFood().then( res => {
      this.totalFood = res.total
    })

    //获取商家信息
    businessMsg().then( res => {
      this.businessMessage = res.rows[0]
      console.log(this.businessMessage)
    })

    //获取上架商品
    putWay().then( res => {
      this.putwayFood = res.msg
    })

    //获取交易总笔数
    tradenum().then( res => {
      this.tradeNum = res.msg
    })

    // 获取好评率最高的
    // goodReputation().then( res => {
    //   this.goodFood = res.data.rows
    //   console.log(this.goodFood)
    // })
  },
  mounted() {
    window.addEventListener("resize", this.reload);

    //图表1 柱状图
    var myChart = echarts.init(document.getElementById('sales'));
    var myChart1 = echarts.init(document.getElementById('evaluate'));
    myChart.setOption({
      color: ['#304156'],
      xAxis: {
        type: 'category',
        data: ['芹菜炒牛肉', '蜂蜜龟苓膏', '芋圆奶茶', '西红柿炒鸡蛋', '皮蛋粥', '鱼香肉丝', '蒜香小龙虾']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [
            1130,
            {
              value: 1950,
              itemStyle: {
                color: '#a90000'
              }
            },
            1160,
            800,
            700,
            1100,
            1300
          ],
          type: 'bar'
        }
      ]
        })

      //图标2 饼图
      myChart1.setOption({
         legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
          }
        },
        legend: {
          show: false
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 50, name: '芹菜炒牛肉98%' },
              { value: 38, name: '蜂蜜龟苓膏85%' },
              { value: 32, name: '芋圆奶茶75%' },
              { value: 30, name: '西红柿炒鸡蛋70%' },
              { value: 28, name: '皮蛋粥80%' },
            ]
          }
        ]
      })
      },
      destroyed() {
        window.removeEventListener("resize", this.reload());
      },
  methods: {
    /**
     * 重新渲染
     */
    reload() {
      //   this.render = false;
      //   this.$nextTick(() => {
      //     this.render = true;
      //   });
    },

    //用户状态
    stateFormat(state) {
      return this.selectDictLabel(this.dict.type.sys_normal_disable, state);
    },

    /**
     * 根据开始日期和结束日期 返回中间的日期
     */
    getDate(startDay, endDay) {
      var bd = new Date(startDay),
        be = new Date(endDay);
      var bd_time = bd.getTime(),
        be_time = be.getTime(),
        time_diff = be_time - bd_time;
      var d_arr = [];
      for (var i = 0; i <= time_diff; i += 86400000) {
        var ds = new Date(bd_time + i);
        d_arr.push(formatDate(ds).substring(5, 10));
      }
      this.date_list = d_arr;
    },

    getTypeCount(date) {
      typeCount(date)
        .then((response) => {
          if (response.data.TypeCount.length > 0) {
            for (let i = 0; i < response.data.TypeCount.length; i++) {
              response.data.TypeCount[i].value =
                response.data.TypeCount[i].value / 100;
            }
            this.data.pay_way = response.data.TypeCount;
          } else {
            this.data.pay_way = [
              {name:"无交易",value: 0}
            ];
          }
        })
        .finally(() => {
          this.pie_border_radius();
        });
    },
    getOrder(date) {
      selectTRefundAmount(date).then((response) => {
        this.data.refund_list = new Array(this.date_list.length).fill(0);
        this.data.order_list = new Array(this.date_list.length).fill(0);
        for (let i = 0; i < response.data.orderAmount.length; i++) {
          let d = response.data.orderAmount[i].createdAt.substring(5, 10);
          this.date_list.forEach((item, index) => {
            if (item == d) {
              this.data.order_list[index] =
                response.data.orderAmount[i].amount / 100;
            }
          });
        }
        for (let i = 0; i < response.data.refundAmount.length; i++) {
          let d = response.data.refundAmount[i].createdAt.substring(5, 10);
          this.date_list.forEach((item, index) => {
            if (item == d) {
              this.data.refund_list[index] =
                response.data.refundAmount[i].refundAmount / 100;
            }
          });
        }
        this.shu();
      });
    },
    line_smooth() {
      var myCharts1 = echarts.init(document.getElementById("line_smooth"));
      var option = {
        color: "#5470c6",
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          show: false,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        tooltip: {
          triggerOn: "mousemove",
          formatter: "{c}",
        },
        series: [
          {
            data: this.data.week_transaction_amount,
            type: "line",
            smooth: true,
          },
        ],
        grid: {
          top: "5%",
          bottom: "10%",
          left: "0%",
          right: "0%",
          containLabel: true,
        },
      };
      myCharts1.setOption(option);
    },
    pie_border_radius() {
      var chartDom = document.getElementById("pie_border_radius");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "10px",
          left: "center",
        },
        series: [
          {
            name: "支付方式",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            top: "40px",
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.data.pay_way,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    shu() {
      var app = {};
      var chartDom = document.getElementById("shu");
      var myChart = echarts.init(chartDom);
      var option;
      const posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {}),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };
      app.config = {
        rotate: 0,
        align: "center",
        verticalAlign: "middle",
        position: "top",
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance,
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        color: ["#91cc75", "#ee6666"],
      };
      option = {
        color: ["#91cc75", "#ee6666"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          left: "8%",
          top: "0%",
          data: ["收款", "退款"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          showTitle: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: true, title: "" },
            magicType: { show: true, type: ["line", "bar", "stack"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: this.date_list,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "收款",
            type: "bar",
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: this.data.order_list,
          },
          {
            name: "退款",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: this.data.refund_list,
          },
        ],
        grid: {
          top: "10%",
          bottom: "2%",
          left: "5%",
          right: "5%",
          containLabel: true,
        },
      };
      myChart.setOption(option);
    },
    pickerFunc() {
      let date = { startTime: this.date_value[0], endTime: this.date_value[1] };
      this.getDate(this.date_value[0], this.date_value[1]);
      this.getOrder(date);
    },
    pickerFunc_pay() {
      let date = {
        startTime: this.pay_way_date_value[0],
        endTime: this.pay_way_date_value[1],
      };
      this.getTypeCount(date);
    },
  },
};
</script>
<style>
.index_data {
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: nowrap;
}
.left-cell {
  position: relative;
  flex-grow: 1;
  min-width: 400px;
  flex-basis: 20%;
  background-image: url(../assets/home/1.jpg);
  background-size:cover;
}
.left-cell-text{
  color: #ffffff;
  z-index: 999;
}
.right-cell {
  width: 370px;
  flex-grow: 0;
  background-image: url(../assets/home/6.jpg);
  background-size:cover;
  transition: all 0.5s;
}

.index_data h1 {
  margin: 25px 0 10px 0;
  font-size: 1.8em;
}
.index_data h1 span {
  font-size: 0.5em;
}
.index_data h4 {
  margin: 0;
}
.index_data_el-card_el-button {
  float: right;
  padding: 3px 0;
  color: #666;
}
.m_cell {
  /* min-width: 100px; */
  height: 117px;
  color: #ffffff;
}
.mid-box {
  flex-basis: 40%;
  flex-grow: 1;
  min-width: 330px;
  margin-right: 5px;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 330px;
}
.mid-cell1 {
  flex-basis: 100%;
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: nowrap;
  margin: 0 0 0 5px;
  height: 162px;
}

.mid-cell2 {
  flex-basis: 100%;
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: nowrap;
  margin: 0 0 0 5px;
  height: 162px;
}
.mid-cell1-1 {
  position: relative;
  flex-grow: 1;
  flex-basis: 60%;
  margin-right: 5px;
  background-image: url(../assets/home/2.jpg);
  background-size:cover;
}

.mid-cell2-1 {
  position: relative;
  flex-grow: 1;
  flex-basis: 60%;
  margin-right: 5px;
  background-image: url(../assets/home/3.jpg);
  background-size:cover;
}

.mid-cell1-2{
  flex-basis: 55%;
  background-image: url(../assets/home/4.jpg);
  background-size:cover;
}

.mid-cell2-2 {
  flex-basis: 55%;
  background-image: url(../assets/home/5.jpg);
  background-size:cover;
}

.bot_box {
  margin-top: 10px;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-wrap: nowrap;
}
.bot_cell1 {
  flex-grow: 1;
  height: 350px;
}
.bot_cell2 {
  min-width: 600px;
  margin-left: 5px;
}
.bot_cell2 h4 {
  margin: 0 0 0 10px;
  display: inline-block
}
.user_info {
  font-size: 50%;
  display: flex;
}
.user_info_cell p {
  font-size: 2em;
  margin-bottom: 5px;
  color: #ffffff;
}
.user_info_cell span {
  font-size: 1.8em;
}
.user_avatar {
  margin-right: 10px;
}
#shu {
  top: 20px;
}
.user_drawer {
  margin: 0 15px;
}
@media screen and (max-width: 1290px) {
  .index_data {
    flex-wrap: wrap;
  }
  .right-cell {
    order: 1;
    flex-basis: 100%;
  }
  .left-cell {
    flex-basis: 40%;
    margin-top: 10px;
    flex-grow: 1;
    order: 2;
  }
  .mid-box {
    margin-right: 0;
    margin-top: 10px;
    width: 100px;
    order: 3;
  }
}
@media screen and (max-width: 1120px) {
  .bot_box {
    flex-wrap: wrap;
  }
  .bot_cell1 {
    min-width: 500px;
    flex-shrink: 0;
    flex-basis: 100%;
  }
  .bot_cell2 {
    flex-grow: 1;
    margin: 10px 0 0 0;
  }
  .bot_cell2 h4 {
    display: inline-block;
    margin-bottom: 30px;
  }
  .bot_cell2_picker {
    float: right;
  }
}
</style>
